<template>
  <div class="main-timeline">
    <!-- swiper -->
    <swiper :options="initOption" ref="mySwiper">
      <swiper-slide
        v-for="(slide, index) in sswiperSlides"
        :key="index"
      >
        <div class="timeline">

          <span class="year">
            <span @click="slideClick($event)">{{slide}}</span>
          </span>
        </div>
      </swiper-slide>
      <div
        class="swiper-button-prev"
        slot="button-prev"
      ></div>
      <div
        class="swiper-button-next"
        slot="button-next"
      ></div>
    </swiper>

  </div>
</template>
<script>
import './timeline.css';
import 'swiper/dist/css/swiper.css';

import { swiper, swiperSlide } from 'vue-awesome-swiper';
export default {
  name: 'timeline',
  props: {
    swiperSlides:{
      type: Array,
      default: ()=>[]
    },
    swiperOption:{
      type: Object,
      default: ()=>{}
    }
  },
  data() {
    return {
      initOption:this.swiperOption,
      sswiperSlides:this.swiperSlides,
      // swiperOption: {
      //   slidesPerView: 9,
      //   spaceBetween: 0,
      //   slidesPerGroup: 9,
      //   loop: true,
      //   loopFillGroupWithBlank: true,
      //   pagination: {
      //     el: '.swiper-pagination',
      //     clickable: true
      //   },
      //   navigation: {
      //     nextEl: '.swiper-button-next',
      //     prevEl: '.swiper-button-prev'
      //   }
      // },
    };
  },
  watch: {
    swiperSlides() {
      this.sswiperSlides = this.swiperSlides;
    }
  },
  methods:{
    slideClick(item){
        
      this.$emit('watchTimeLine',item.currentTarget.innerText);
    }
  },
  components: {
    swiper,
    swiperSlide
  }
};
</script>

